<template>
  <el-dialog
    class="flex-center"
    :title="upload.title"
    :visible.sync="dialogVisible"
    width="600px"
    append-to-body
    @close="close"
  >
    <el-upload
      ref="upload"
      :disabled="upload.isUploading"
      :limit="1"
      :multiple="false"
      accept=".csv"
      :file-list="upload.fileList"
      action=""
      :on-change="uploadChange"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip text-center" slot="tip">
        <span>仅允许导入csv格式文件。</span>
        <!-- <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="func"
            >下载模板</el-link
          > -->
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        :disabled="upload.fileList.length === 0"
        @click="confirm"
        >确 定</el-button
      >
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    func: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        fileList: [],
      },
    };
  },
  methods: {
    uploadChange(file, fileList) {
      this.upload.fileList = fileList;
    },
    confirm() {
      this.$emit("confirm", this.upload.fileList);
    },
    close() {
      this.dialogVisible = false;
      this.upload.fileList = [];
      this.$emit("close");
    },
  },
  created() {
    setTimeout(() => {
      this.dialogVisible = true;
    }, 50);
  },
  mounted() {},
};
</script>
<style lang="scss" scoped></style>
